<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<!--引入angularjs的js库-->
	<script src="/plugins/angularjs/angular.min.js"></script>
	<!--引入自定义的js库-->
	<script src="/js/pinyougou/base00.js"></script>
	<script src="/js/pinyougou/service/goodsService.js"></script>
	<script src="/js/pinyougou/service/fileUploadService.js"></script>
	<script src="/js/pinyougou/service/itemCatService.js"></script>
	<script src="/js/pinyougou/service/typeTemplateService.js"></script>
	<script src="/js/pinyougou/controller/baseController.js"></script>
	<script src="/js/pinyougou/controller/goodsController.js"></script>
</head>

	<!--初始化KindEditor-->
	<script type="text/javascript">
		var editor;
		KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {
				allowFileManager : true
			});
		});
	</script>

</head>

<body ng-app="pinyougou" ng-controller="goodsController" ng-init="findByParentId(0);findOne()" class="hold-transition skin-red sidebar-mini" >

<!-- 正文区域 -->
<section class="content">

	<div class="box-body">
		<!--tab页-->
		<div class="nav-tabs-custom">
			<!--tab头-->
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab">商品基本信息</a>
				</li>
				<li >
					<a href="#pic_upload" data-toggle="tab">商品图片</a>
				</li>
				<li >
					<a href="#customAttribute" data-toggle="tab">扩展属性</a>
				</li>
				<li >
					<a href="#spec" data-toggle="tab" >规格</a>
				</li>
			</ul>
			<!--tab头/-->
			<!--entity.goods：{{entity.goods}}<br>-->
			<!--entity.goodsDesc：{{entity.goodsDesc}}<br>-->
			<!--entity.items：{{entity.items}}<br>-->
			<!--entity.goodsDesc.specificationItems：{{entity.goodsDesc.specificationItems}}-->
			<!--tab内容-->
			<div class="tab-content">
				<!--表单内容-->
				<div class="tab-pane active" id="home">
					<div class="row data-type">
					   <div class="col-md-2 title">商品分类</div>

						  <div class="col-md-10 data">
							<table>
								<tr>
									<td>
										<select class="form-control" ng-model="entity.goods.category1Id"
										ng-options="item.id as item.name for item in category1List">
										</select>
									</td>
									<td>
										<select class="form-control" ng-model="entity.goods.category2Id"
												ng-options="item.id as item.name for item in category2List">
										</select>
									</td>
									<td>
										<select class="form-control" ng-model="entity.goods.category3Id"
												ng-options="item.id as item.name for item in category3List">
										</select>
									</td>
									<td>
										&nbsp;模板ID：{{entity.goods.typeTemplateId}}
									</td>
								</tr>
							</table>

						  </div>

						<!--基本信息-->
						<div class="col-md-2 title">商品名称</div>
					   <div class="col-md-10 data">
						   <input ng-model="entity.goods.goodsName" class="form-control"    placeholder="商品名称" value="">
					   </div>

					   <div class="col-md-2 title">品牌</div>
					   <div class="col-md-10 data">
						  <select class="form-control" ng-model="entity.goods.brandId"
								  ng-options="brand.id as brand.text for brand in typeTemplate.brandIds" ></select>
					   </div>

					   <div class="col-md-2 title">副标题</div>
					   <div class="col-md-10 data">
						   <input ng-model="entity.goods.caption" class="form-control"   placeholder="副标题" value="">
					   </div>

					   <div class="col-md-2 title">价格</div>
					   <div class="col-md-10 data">
						   <div class="input-group">
							   <span class="input-group-addon">¥</span>
							   <input ng-model="entity.goods.price" class="form-control"  placeholder="价格" value="">
						   </div>
					   </div>

					   <div class="col-md-2 title editer">商品介绍</div>
					   <div class="col-md-10 data editer">
						   <textarea ng-model="entity.goodsDesc.introduction" name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
					   </div>

					   <div class="col-md-2 title rowHeight2x">包装列表</div>
					   <div class="col-md-10 data rowHeight2x">

						<textarea ng-model="entity.goodsDesc.packageList" rows="4"  class="form-control"   placeholder="包装列表"></textarea>
					   </div>

					   <div class="col-md-2 title rowHeight2x">售后服务</div>
					   <div class="col-md-10 data rowHeight2x">
						   <textarea ng-model="entity.goodsDesc.saleService" rows="4"  class="form-control"    placeholder="售后服务"></textarea>
					   </div>

					</div>
				</div>

				<!--图片上传-->
				<div class="tab-pane" id="pic_upload">
					<div class="row data-type">
					 <!-- 颜色图片 -->
					 <div class="btn-group">
						 <button ng-click="imageEntity={}" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

					 </div>

					 <table class="table table-bordered table-striped table-hover dataTable">
							<thead>
								<tr>

									<th class="sorting">颜色</th>
									<th class="sorting">图片</th>
									<th class="sorting">操作</th>
							</thead>
							<tbody>
							  <tr ng-repeat="imageEntity in entity.goodsDesc.itemImages">
									<td>{{imageEntity.color}}</td>
									<td><img alt="" src="{{imageEntity.url}}" width="100px" height="100px"></td>
									 <td><button ng-click="delImageEntity($index)" class="btn btn-default"><i class="fa fa-trash-o"></i>删除</button>
									 </td>
							  </tr>
							</tbody>
					 </table>

					</div>
				</div>


				<!--扩展属性-->
				<div class="tab-pane" id="customAttribute">
					<div class="row data-type">
						<div ng-repeat="item in entity.goodsDesc.customAttributeItems">
							<div class="col-md-2 title">{{item.text}}</div>
							<div class="col-md-10 data">
								  <input class="form-control" ng-model="item.value">
							</div>
						</div>
					</div>
				</div>

				<!--规格-->
				<div class="tab-pane" id="spec">
					<div class="row data-type">
						<div class="col-md-2 title">是否启用规格</div>
						<div class="col-md-10 data">
							<input ng-click="useSpec($event)" type="checkbox" >
						</div>
					</div>
					<p>

					<div>

						<div class="row data-type">

							<div ng-repeat="spec in specList">
								<div class="col-md-2 title">{{spec.text}}</div>
								<div class="col-md-10 data">
									<span ng-repeat="option in spec.options">
										<input ng-click="selectSpecAttribute($event,spec.text,option.optionName)"
											   type="checkbox" ng-checked="checkSpec(spec.text,option.optionName)">
										{{option.optionName}}
									</span>
								</div>
							</div>

						</div>


						<div class="row data-type">
							 <table class="table table-bordered table-striped table-hover dataTable">
								<thead>
									<tr>
										<th class="sorting" ng-repeat="spec in entity.goodsDesc.specificationItems">
											{{spec.attributeName}}
										</th>
										<th class="sorting">价格</th>
										<th class="sorting">库存</th>
										<th class="sorting">是否启用</th>
										<th class="sorting">是否默认</th>
									</tr>
								</thead>

								<tbody>
								  <tr ng-repeat="item in entity.items">
										<td ng-repeat="specItem in entity.goodsDesc.specificationItems">
											{{item.spec[specItem.attributeName]}}
										</td>
										<td><input class="form-control" ng-model="item.price"></td>
										<td><input class="form-control" ng-model="item.num"></td>
										<td><input type="checkbox"  ng-model="item.status" ng-true-value="1" ng-false-value="0"></td>
										<td><input type="checkbox"  ng-model="item.isDefault" ng-true-value="1" ng-false-value="0"></td>
								  </tr>
								</tbody>
							</table>

						</div>

					</div>
				</div>

			</div>
			<!--tab内容/-->
			<!--表单内容/-->
		</div>
	   </div>
	  <div class="btn-toolbar list-toolbar">
		  <button ng-click="save()" class="btn btn-primary" ><i class="fa fa-save"></i>保存</button>
		  <button class="btn btn-default" >返回列表</button>
	  </div>

</section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td>
						<input  ng-model="imageEntity.color" class="form-control" placeholder="颜色" >
					</td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
								<input type="file" id="file" />				                
					                <button class="btn btn-primary" type="button" ng-click="fileUpload()">
				                   		上传
					                </button>	
					            </td>
								<td>
									<img  src="{{imageEntity.url}}" width="200px" height="200px">
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button ng-click="addImageEntity()" class="btn btn-success"  data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

<!-- 正文区域 /-->

</body>

</html>